<template>
	<view class="content">
		<!-- 背景图 -->
		<view class="content_image">
			<image :src="url" mode="aspectFill" @click="chooseImg"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info" v-if="userinfo">
				<image :src="userinfo.avatar" mode=""></image>
				<view class="username">
					{{userinfo.nickName}}
				</view>
			</view>
			<view v-else class="noLogin">
				<image :src="computedAvatarUrl" mode="widthFix" @click="login"></image>
			</view>

			<!--  -->
			<view class="other">
				<view class="other_addres" @click="baseData">
					<view>个人资料</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view>
				<view class="other_our" @click="myOrder">
					<view>我的约球</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view>
				<view class="other_friend" @click="friend">
					<view>我的好友</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view>

			<!-- 	<view class="other_friend" @click="customer">
					<view>联系客服</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view> -->
				<view class="other_friend" @click="AppInfo">
					<view>关于我们</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view>
				<view class="other_out" @click="confirmExit">
					<view>退出登录</view>
					<image src="/static/my/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		logout,
	} from '@/api/login/login.js';
	import {
		uploadBackground
	} from '@/api/my/user.js'
	import websocketUtil from '@/utils/webSoketUtil.js';

	export default {
		data() {
			return {
				userinfo: [],
				collectNum: 0
			}
		},
		// 监听 Vuex 状态更新
		computed: {
			// 获取背景图URL（来自 Vuex）
			url() {
				const storedUrl = this.$store.state.user.url;
				console.log("当前背景图URL:", storedUrl);
				// 确保有默认背景图
				return storedUrl ? 'http://localhost:8080' + storedUrl : '/static/my/beijin.jpg';
			},

			// 从 Vuex 中获取头像路径并拼接完整的 URL
			computedAvatarUrl() {
				const avatarUrl = this.$store.state.user.avatar;
				if (!avatarUrl) {
					return 'http://localhost:8080/default-avatar.jpg';
				}
				// 拼接完整的 URL
				return avatarUrl.startsWith('http') ? avatarUrl : `http://localhost:8080${avatarUrl}`;
			},
		},

		onShow() {
			this.userinfo = uni.getStorageSync('user');
			let collect = uni.getStorageSync('collect');
			this.collectNum = collect.length;
		},

		methods: {
			// 选择背景图片
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album", "camera"],
					success: (res) => {
						const filePath = res.tempFilePaths[0];
						this.uploadBackgroundImg(filePath);
					},
					fail: () => {
						uni.showToast({
							title: "取消选择背景图",
							icon: "none",
						});
					},
				});
			},

			// 上传背景图片
			uploadBackgroundImg(filePath) {
				uploadBackground(filePath)
					.then((res) => {
						if (res.code === 200) {
							this.$store.dispatch('user/setUrl', res.imgUrl); // 更新背景图 URL
							uni.showToast({
								title: "背景图修改成功",
								icon: "success",
							});
						} else {
							uni.showToast({
								title: res.msg || "背景图修改失败",
								icon: "none",
							});
						}
					})
					.catch((error) => {
						console.error("背景图上传失败:", error);
						uni.showToast({
							title: "网络异常，请稍后再试",
							icon: "none",
						});
					});
			},

			// 登录
			login() {
				var that = this;
				// #ifdef MP-WEIXIN
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						console.log(res)
						that.userinfo = res.userInfo;
						wx.setStorageSync('user', res.userInfo);
					}
				})
				// #endif
			},

			// 基本资料
			baseData() {
				console.log(this.computedAvatarUrl);
				uni.navigateTo({
					url: '/pages/my/PersonalCenter',
				});
			},
			// 我的订单
			myOrder() {
				uni.navigateTo({
					url: '/pages/my/order',
				});
			},
			//我的好友
			friend() {
				uni.navigateTo({
					url: '/pages/my/crony',
				});
			},
			//联系客服
			customer() {
				uni.navigateTo({
					url: `/pages/message/chat`
				})
			},
			//关于我们
			AppInfo() {
				uni.navigateTo({
					url: `/pages/my/AppInfo`
				})
			},

			// 弹出提示确认退出
			confirmExit() {
				uni.showModal({
					title: '确认退出',
					content: '你确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了“确定”，执行退出登录操作
							this.exit();
						} else if (res.cancel) {
							// 用户点击了“取消”，可以不做任何操作
							console.log('用户取消退出');
						}
					}
				});
			},


			// 执行退出登录操作
			exit() {
				logout()
					.then(res => {
						if (res.code === 200) {

							// 关闭 WebSocket 连接
							if (this.$socket) {
								this.$socket.close();
								console.log("WebSocket 已关闭");
							}
							// 删除本地存储中的用户信息
							this.removeStorage('user');

							// 删除会话存储中的token
							this.removeSessionStorage('token');

							// 跳转到登录页
							uni.navigateTo({
								url: '/pages/login/login'
							});
						} else {
							uni.showToast({
								title: res.msg || '退出登录失败，请稍后重试',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
						console.error('请求失败:', err);
					});
			},

			// 删除本地存储
			removeStorage(key) {
				uni.removeStorage({
					key: key,
					success: function() {
						console.log(`${key} 删除成功`);
					},
					fail: function() {
						console.log(`${key} 删除失败`);
					}
				});
			},

			// 删除会话存储
			removeSessionStorage(key) {
				uni.removeStorage({
					key: key,
					success: function() {
						console.log(`${key} 会话存储删除成功`);
					},
					fail: function() {
						console.log(`${key} 会话存储删除失败`);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.content_image {
		image {
			// 高斯模糊
			filter: blur(3rpx);
			width: 100%;
			height: 280px;
		}

		height: 300rpx;
		position: relative;
	}

	.content_botton {
		.noLogin {
			position: absolute;
			left: 45%;
			transform: translate(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 200rpx;
				/* 圆形的宽度 */
				height: 200rpx;
				/* 圆形的高度，需等于宽度 */
				border-radius: 50%;
				/* 设置圆角为 50%，形成圆形 */
				object-fit: cover;
				/* 确保图片内容适应容器 */
				border: 2rpx solid #ccc;
				/* 可选，添加边框 */
				box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
				/* 可选，添加阴影效果 */
			}


		}

		.content_info {
			position: relative;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;

			image {
				margin-top: -40rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.username {}

			.select {
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 40rpx;
				}
			}
		}

		.my_order {
			width: 90%;
			margin-top: 10rpx;
			margin-left: 5%;
			height: 280rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.my_order_title {
				border-radius: 20rpx;
				padding-left: 20rpx;
				line-height: 80rpx;
				height: 80rpx;
			}

			.my_order_item {
				padding: 4.5%;
				float: left;

				.my_order_content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.other {
		margin: 30rpx 40rpx;
		height: 600rpx;
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;
		// margin-left: 75px;


		.other_addres {
			margin-top: 30px;
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_our {
			// margin-top: 30px;
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_friend {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_out {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>